{% extends "admin/base_site.html" %}
{% load i18n %}

{% block extrahead %}
    <script type='text/javascript' >
        // Make sure this comes before loading other js!
        var letter_grade_required_for_pass = {{ letter_grade_required_for_pass }}; 
    </script>
    <link rel="stylesheet" type="text/css" href="/static/css/gradesheet.css" />
    <script type="text/javascript" src="/static/js/gradesheet.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.comment').hide();
            $("#grade_form").mouseup(function(e){
                    e.preventDefault();
            });
            $('td.column_0.row_0 input').focus();
        });
    </script>
{% endblock %}

{% block breadcrumbs %}
    <div id="breadcrumbs">
        <a href="{% url admin:index %}">{% trans "Home" %}</a> &rsaquo;
        <a href="{% url admin:sis_student_changelist %}"> Courses </a> &rsaquo; 
        <a href="{% url admin:sis_student_change student.id %}"> {{ student }}  </a> &rsaquo; 
        Student Gradesheet
    </div>
{% endblock %}

{% block content %}
	<h2> Grades - {{ student }} - {{ school_year }} </h2>
	Select school year:
	{% for year in school_years %}
	    {% if not forloop.first %} &nbsp;&nbsp; &middot; {% endif %} &nbsp;&nbsp; <a href="{{ year.id }}"> {{ year }} </a>
	{% endfor %}
        
    <form action="" onsubmit="submit_form()" method="post">
	<table id="gradebook_table">
            <thead>
                <tr>
                    <th>Course</th>
		    {% for mp in marking_periods %}
			<th>{{ mp }}</th>
		    {% endfor %}
                    <th>YTD</th>
                </tr>
            </thead>
            <tbody>
                {% for course in courses %}
                    {% with row_counter=forloop.counter0 %}
                    <tr>
                        <td>
			    {{ course }}
			</td>
			{% for mp in marking_periods %}
                            <td id="tdc{{ forloop.counter0 }}_r{{ row_counter }}">
                                {% for grade in course.grades %}
                                    {% if grade.marking_period == mp %}
                                        <input
                                            id="id_grade_{{ course.id }}_{{ grade.id }}"
                                            name="grade_{{ grade.id }}"
                                            value="{{ grade.get_grade }}"
                                            class="grade_form"
                                            size="7"
                                            onchange="recalc_student_grade(event, {{ course.id }})"
                                            onkeydown="return keyboard_nav(event)"
                                        />
                                        <span class="comment">
                                            <br/>
                                            <textarea rows="2" onchange="mark_change(event)" name="comment_{{ grade.id }}" placeholder="Comment">{{ grade.comment }}</textarea>
                                        </span>
                                    {% endif %}
                                {% endfor %}
                            </td>
                            {% if forloop.last %}
                        <td id="tdc{{ forloop.counter }}_r{{ row_counter }}">
                            {% endif %}
			{% endfor %}
			    <input
				id="id_coursefinalform_{{ course.id }}"
				name="coursefinalform_{{ course.id }}_{{ student.id }}"
				value="{{ course.final }}"
				size="7"
                                class="grade_form {% if course.final_override %}final_override{% endif %}"
				onchange="mark_change(event)"
                                onkeydown="return keyboard_nav(event)"
			     />
                            {% if course.final_override %}
                                <img onclick="remove_grade(event,'id_coursefinalform_{{ course.id }}')" class="cancel" src="/static/images/cancel.png"/>
                            {% endif %}
			</td>
		    </tr>
                    {% endwith %}
                {% endfor %}
            </tbody>
        </table>
	
        <br/>
	<a href="javascript:void(0)" onclick="toggle_comments()">Toggle Comments</a>
	<br/>
	
        <input type="submit" name="edit" value="Save grades"/> 
    </form>
    <script>$(".comment").hide();</script>
{% endblock %}
